
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.4.9/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>        body {
        font-family: Arial, sans-serif;
        background-color: #f8f9fa;
        margin: 0;
        padding: 0;
    }
    #userInfoTable {
        width: 100%;
        max-width: 800px;
        margin: 50px auto;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    #userInfoTable thead {
        background-color: #007bff;
        color: white;
    }
    #userInfoTable th, #userInfoTable td {
        text-align: left;
        vertical-align: middle;
        padding: 15px;
        border-color: #dee2e6;
    }
    #userInfoTable tbody tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    #userInfoTable tbody tr:hover {
        background-color: #ddd;
    }
    .container {
        padding: 200px;
    }
    </style>body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
    }
    #userInfoTable {
    width: 100%;
    max-width: 800px;
    margin: 50px auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    #userInfoTable thead {
    background-color: #007bff;
    color: white;
    }
    #userInfoTable th, #userInfoTable td {
    text-align: left;
    vertical-align: middle;
    padding: 15px;
    border-color: #dee2e6;
    }
    #userInfoTable tbody tr:nth-child(even) {
    background-color: #f2f2f2;
    }
    #userInfoTable tbody tr:hover {
    background-color: #ddd;
    }
    .container {
    padding: 200px;
    }body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
    }
    #userInfoTable {
    width: 100%;
    max-width: 800px;
    margin: 50px auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    #userInfoTable thead {
    background-color: #007bff;
    color: white;
    }
    #userInfoTable th, #userInfoTable td {
    text-align: left;
    vertical-align: middle;
    padding: 15px;
    border-color: #dee2e6;
    }
    #userInfoTable tbody tr:nth-child(even) {
    background-color: #f2f2f2;
    }
    #userInfoTable tbody tr:hover {
    background-color: #ddd;
    }
    .container {
    padding: 200px;
    }
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
    <button type="submit" class="text-center" @click="location()">学生信息</button>
    <table id="userInfoTable" class="table table-striped table-hover">
        <thead>
        <tr>
            <th scope="col">用户名</th>
            <th scope="col">性别</th>
            <th scope="col">年龄</th>
            <th scope="col">班级ID</th>
            <th scope="col">学生ID</th>
            <th scope="col">专业</th>
            <th scope="col">昵称</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    function location() {
        window.location.href = "select_all_user_profile.html";
    }
    function fetchDataAndDisplay() {
    var gender = 'yourGender'; // 根据实际情况设置
    var age = 'yourAge'; // 根据实际情况设置
    var classId = 'yourClassId'; // 根据实际情况设置
    var stuId = 'yourStuId'; // 根据实际情况设置
    var professional = 'yourProfessional'; // 根据实际情况设置
    var nickname = 'yourNickname'; // 根据实际情况设置

    $.ajax({
        url: 'http://127.0.0.1:8888/UserProfile_select',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            user: sessionStorage.getItem('username'), // 假设用户ID存储在sessionStorage中
            gender: gender,
            age: age,
            classId: classId,
            stuId: stuId,
            professional: professional,
            nickname: nickname
        }),
        success: function(response) {
            if (response.status === 1) {
                var tbody = $('#userInfoTable tbody');
                tbody.empty(); // 清空现有数据，避免重复添加
                response.userinfo.forEach(function(userInfo) {
                    var row = $('<tr>');
                    row.append($('<td>').text(userInfo.user));
                    row.append($('<td>').text(userInfo.gender));
                    row.append($('<td>').text(userInfo.age));
                    row.append($('<td>').text(userInfo.classId));
                    row.append($('<td>').text(userInfo.stuId));
                    row.append($('<td>').text(userInfo.professional));
                    row.append($('<td>').text(userInfo.nickname));
                    tbody.append(row);
                });
            } else {
                alert(response.msg);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.error('Error:', textStatus, errorThrown);
        }
    });
}

// 初始加载数据
    location()
fetchDataAndDisplay();


// 设置自动刷新间隔，例如每5秒刷新一次
setInterval(fetchDataAndDisplay, 5000);
</script>
</body>
</html>